<template>
  <v-layout :title="title+'公众号'">
    <el-row type="flex" justify="center">
      <el-col :lg="14" :md="20" :sm="24">
        <v-form
          :form-title="formTitle"
          :form-data="formData"
          label-width="120px"
        >
          <template slot="upload1">
            <el-form-item label="图片上传">
              <el-upload
                :show-file-list="false"
                :with-credentials="true"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                class="avatar-uploader"
                :action="action">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </el-form-item>
          </template>
        </v-form>

        <!--广告位置自定义-->
        <div>
          <div class="pdv15  bold bottom-line ">
            广告位置自定义
          </div>
          <div v-for="(data,index) in advPositionData" class="bottom-line">

            <v-form
              :form-title="advPositionTitle"
              :form-data="data"
              label-width="120px"
            />
            <el-row type="flex" justify="end">
              <el-button size="mini" type="danger" @click="removePosition(data)">移除</el-button>
            </el-row>
          </div>
        </div>
        <el-row type="flex" justify="start" style="padding-left:120px">
          <el-button size="mini" type="primary" @click="addPosition">新增</el-button>
        </el-row>

        <div class="pdt15">
          <v-form
            :form-title="dateTitle"
            :form-data="formData"
            label-width="120px"
          />
        </div>

        <el-row type="flex" justify="end">
          <el-button type="primary" size="mini" @click="reset">撤销修改</el-button>
          <el-button type="primary" size="mini" @click="submit">确定</el-button>
        </el-row>
      </el-col>
    </el-row>
  </v-layout>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      imageUrl: '',
      mp_id: '',

      action: process.env.BASE_API + 'file/up',

      editFormTitle: [
        {
          cn: 'id',
          en: 'mpsid',
          disabled: true
        },
        {
          cn: '公众号名称',
          en: 'mpsname'
        },
        {
          cn: '公众号类别分组',
          en: 'group_id',
          type: 'select',
          list: [
            {
              label: '自营账号',
              value: 1
            },
            {
              label: '媒介账号',
              value: 2
            },
            {
              label: '城觅抖音',
              value: 3
            }
          ]
        },
        {
          cn: '公众号appid',
          en: 'app_id'
        },
        {
          cn: '公众号logo',
          en: 'logo',
          type: 'upload1'
        },
        {
          cn: '所属公司',
          en: 'company_id',
          type: 'select',
          list: [
            {
              label: '系统默认公司',
              value: 1
            },
            {
              label: '霍尔果斯微赞网络科技有限公司',
              value: 2
            }
          ]
        },
        {
          cn: '公众号原始id',
          en: 'origin_id'
        },
        {
          cn: '默认银行选项',
          en: 'default_bank_id', // 没有
          type: 'select',
          list: [
            {
              label: '默认银行',
              value: 0
            },
            {
              label: '银行A',
              value: 1
            },
            {
              label: '银行B',
              value: 2
            }
          ]
        },
        {
          cn: '达人分成比',
          en: 'proportion_talents',
          // append:true,
          // text:'%'
        },
        {
          cn: '采购成本(开票)',
          en: 'purchase_cost'
        },
        {
          cn: '采购成本(未开票)',
          en: 'purchase_cost_no'
        }
      ],
      createFormTitle: [
        {
          cn: '公众号名称',
          en: 'mpsname'
        },
        {
          cn: '公众号类别分组',
          en: 'group_id',
          type: 'select',
          list: [
            {
              label: '自营账号',
              value: 1
            },
            {
              label: '媒介账号',
              value: 2
            },
            {
              label: '城觅抖音',
              value: 3
            }
          ]
        },
        {
          cn: '公众号appid',
          en: 'app_id'
        },
        {
          cn: '公众号logo',
          en: 'logo',
          type: 'upload1'
        },
        {
          cn: '所属公司',
          en: 'company_id',
          type: 'select',
          list: [
            {
              label: '系统默认公司',
              value: 1
            },
            {
              label: '霍尔果斯微赞网络科技有限公司',
              value: 2
            }
          ]
        },
        {
          cn: '公众号原始id',
          en: 'weixin_id'
        },
        {
          cn: '默认银行选项',
          en: 'default_bank_id', // 没有
          type: 'select',
          list: [
            {
              label: '默认银行',
              value: 0
            },
            {
              label: '银行A',
              value: 1
            },
            {
              label: '银行B',
              value: 2
            }
          ]
        },
        {
          cn: '采购成本(开票)',
          en: 'purchase_cost'
        },
        {
          cn: '采购成本(未开票)',
          en: 'purchase_cost_no'
        }
      ],
      formData: {},

      advPositionTitle: [
        {
          cn: '名称',
          en: 'place_name'
        },
        {
          cn: '颜色',
          en: 'color',
          type: 'select',
          list: [
            {
              label: '淡红色',
              value: '#ff5c92'
            },
            {
              label: '淡绿色',
              value: '#50adf2'
            },
            {
              label: '淡紫色',
              value: '#d36ded'
            },
            {
              label: '棕色',
              value: '#b0936b'
            },
            {
              label: '淡绿色',
              value: '#37fad3'
            },
            {
              label: '橙色',
              value: '#ffe327'
            }
          ]
        },
        {
          cn: '显示顺序',
          en: 'display_order'
        }
      ],
      advPositionData: [],

      dateTitle: [
        {
          cn: '创建时间',
          en: 'created_at',
          disabled: true
        },
        {
          cn: '更新时间',
          en: 'updated_at',
          disabled: true
        }
      ],
      id: '',
      timer: null
    }
  },
  computed: {
    formTitle() {
      if (this.id) {
        this.title = '修改'
        return this.editFormTitle
      } else {
        this.title = '新建'
        return this.createFormTitle
      }
    }
  },
  activated() {
    this.id = this.$route.query.id
    if (this.id) {
      this.getFormData()
    }
  },
  methods: {

    getFormData() {
      const data = { id: this.id }
      this.$get('action/WechatNumber/qryOp', data)
        .then(res => {
          this.formData = res.data.WechatNumber || {}
          this.advPositionData = res.data.places || {}
          this.timer = null
          this.imageUrl = this.formData.logoname

        })
    },

    checkModifyPlace(){

      return this.advPositionData.every(item => {
        console.log(!item.place_name||!item.color)
        return(item.place_name&&item.color)
      })
    },
    // 修改公众号自定义广告位置
    modifyPlace() {
      this.advPositionData.forEach(item => {
        const data = { ...item, mp_id: this.id }
        return this.$post('action/WechatNumber/saveplaces', data)
          .then(res => {

          })
      })
    },

    removePosition(data, index) {
      this.$confirm('是否删除该条信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const datas = { id: data.id }
        this.$post('action/WechatNumber/delplaces', datas)
          .then(res => {
            this.getFormData()
          })
      }).catch(() => {
        return this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addPosition() {
      this.advPositionData.push({
        place_name: '',
        color: '',
        display_order: ''
      })
    },
    reset() {
      if (this.id) {
        return this.getFormData()
      }
      this.formData = {}
    },
    submit() {
      if(!this.checkModifyPlace()){
        return this.$alert('广告位置名称和颜色不能为空','警告',{
          type:'warning'
        })
      }else{
        this.modifyPlace()
      }
      const data = {
        name: this.formData.mpsname,
        company_id: this.formData.company_id,
        group_id: this.formData.group_id,
        id: this.formData.mpsid,
        logo: this.imageUrl,
        app_id: this.formData.app_id,
        origin_id: this.formData.origin_id,
        purchase_cost: this.formData.purchase_cost,
        purchase_cost_no: this.formData.purchase_cost_no,
        proportion_talents: this.formData.proportion_talents,
        default_bank_id: this.formData.default_bank_id
      }
      this.$post('action/WechatNumber/save', data)
        .then(res => {
          new Promise((resolve, reject) => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            resolve()
          })
            .then(_ => this.$router.go(-1))
        })
    },

    // 上传图片
    myUpload(e) {
      this.imageUrl = e.url
    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw)
      this.imageUrl = res.url
      this.formData.logo = res.url
      console.log(res.url, this.imageUrl)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    }

  }
}
</script>

<style scoped>

</style>
